<template>
    <div class="msgfk" @click="close">
        <div
            class="msgfk-box"
            :style="{ top: y, left: x }"
            @click.stop="noClose"
        >
            <div class="gnfk-title">反馈</div>
            <div v-if="isLike == 1" class="tabs">
                <div
                    v-for="(item, index) in zanTab"
                    :key="index"
                    class="tab"
                    :class="{ 'tab-active': item.checked }"
                    @click="select(index)"
                >
                    {{ item.name }}
                </div>
            </div>
            <div v-if="isLike == 2" class="tabs">
                <div
                    v-for="(item, index) in caiTab"
                    :key="index"
                    class="tab"
                    :class="{ 'tab-active': item.checked }"
                    @click="select(index)"
                >
                    {{ item.name }}
                </div>
            </div>
            <div class="">
                <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="留下更多反馈"
                    :autosize="false"
                    resize="none"
                    v-model="content"
                >
                </el-input>
            </div>

            <div class="buts">
                <el-button size="mini" type="text" @click="close">
                    取消
                </el-button>
                <el-button type="primary" size="mini" @click="submit">
                    提交
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "msgfk",
    data() {
        return {
            content: "",

            zanTab: [
                { name: "信息准确", checked: false },
                { name: "来源可靠", checked: false },
                { name: "节约时间", checked: false },
                { name: "功能有趣", checked: false },
            ],
            caiTab: [
                { name: "答案有误", checked: false },
                { name: "来源有误", checked: false },
                { name: "内容陈旧", checked: false },
                { name: "与事实不符", checked: false },
            ],
        };
    },
    props: {
        x: { type: String, default: "" },
        y: { type: String, default: "" },
        isLike: { type: Number, default: 1 },
    },
    watch: {},
    mounted() {},
    methods: {
        close() {
            this.$emit("close");
        },
        noClose() {},
        submit() {
            let tab = this.isLike == 1 ? this.zanTab : this.caiTab;
            this.$emit("submit", tab, this.content);
        },

        select(index) {
            let tab = this.isLike == 1 ? this.zanTab : this.caiTab;
            tab[index].checked = !tab[index].checked;
        },
    },
};
</script>

<style lang="scss" scoped>
.msgfk {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    .msgfk-box {
        width: 247px;
        position: fixed;
        top: 50%;
        left: 50%;
        background-color: #fff;
        padding: 13px 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
}
.gnfk-title {
    font-size: 18px;
    color: #333333;
    padding-bottom: 15px;
}

.up-img {
    font-size: 0.75rem;
    color: #a4a4a4;
    padding-top: 1.1rem;
    span {
        color: #1c87f3;
        padding-right: 3px;
    }
}

.tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 10px;
    .tab {
        margin-bottom: 8px;
        width: 95px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #7c7c7c;
        font-size: 14px;
        color: #333333;
        cursor: pointer;
        user-select: none;
        &:hover {
            opacity: 0.8;
        }
    }
    .tab-active {
        border-color: #1c87f3;
        color: #1c87f3;
    }
}

.buts {
    padding-top: 16px;
    text-align: right;
}
</style>
